<script setup lang='ts'>
import { useGetMember, useGetMemberLevelList } from '@fl/api/man-api/message-center'
import { useUserStore } from '@fl/store/modules/user'
import { computed } from 'vue'

import Member from '/assets/member.png'
import MemberDisable from '/assets/member-disable.png'

const emits = defineEmits(['click'])

const userStore = useUserStore()
const { data: memberInfo, refetch } = useGetMember()
const { data: memberLevelList, refetch: menberLieveRefetch } = useGetMemberLevelList()
const isGys = computed(() => {
    return ((userStore!.userInfo || {}) as any).userTypeCategory === '供应商' && memberInfo.value?.configMemberLevelFlag === 1
})
const imageUrl = computed(() => {
    return memberInfo.value && memberInfo.value.memberStatus !== undefined && memberInfo.value.memberStatus === 1 ? MemberDisable : Member
})

menberLieveRefetch()
refetch()
</script>

<template>
    <div v-if="isGys && memberLevelList?.length > 0"
         class="memberBox px-10px py-3px bg-#272727 rounded-6px text-12px c-#c5884c flex cursor-pointer items-center"
         :class="{
             memberDisable: memberInfo && memberInfo.memberStatus === 1,
         }"
         @click="emits('click')"
    >
        <img v-if="memberInfo && memberInfo.memberStatus !== undefined "
             :src="imageUrl"
             class="m0"
             alt="Logo"
        >

        <span class="ml-5px"
              style="line-height: 1.5"
        >{{ memberInfo?.memberStatus !== undefined ? memberInfo.memberLevel : '开通会员' }}</span>
    </div>
</template>

<style scoped>
.memberBox {
    line-height: 1;
}

.memberDisable {
    background-color: #c9cdd4 !important;
    color: #fff !important;
}
</style>
